<template>
  <div class="config-wrapper">
    <!-- 搜索框 -->
    <Form :model="formSearch" label-position="right" label-colon :label-width="80">
      <Row :gutter="10">
        <Col :xs="24" :sm="24" :md="12" :lg="6">
          <FormItem label="服务名称">
            <Input v-model="formSearch.dataId" placeholder="请输入服务名称"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6">
          <FormItem label="组名称">
            <Input v-model="formSearch.groupId" placeholder="请输入组名称"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="6">
          <FormItem>
            <Button type="primary" @click="querySearch" shape="circle" icon="ios-search">查询</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- 表格数据 -->
    <Table :loading="loading" border ref="selection" :columns="columns" :data="tableData"></Table>

    <!-- 分页按钮 -->
    <div class="page-wrapper">
      <Page :total="tableData.length" @on-change="handlePage" show-elevator show-total/>
    </div>

    <!-- 查看配置信息 -->
    <div>
      <Modal
        v-model="detailModal"
        :title="configTitle"
        ok-text="返回"
        cancel-text=""
        class="input-model"
        width="750">
        <div class="input-box">
          <Input :border="false" v-model="content" type="textarea" :autosize="{minRows: 2,maxRows: 25}" readonly/>
        </div>
      </Modal>
    </div>

    <!-- 编辑配置信息 -->
    <div>
      <Modal
        v-model="editModal"
        :title="editConfigTitle"
        ok-text="保存修改"
        cancel-text="返回"
        fullscreen
        class="config-model"
        @on-ok="handelAdd">
        <div>
          <yaml-editor  v-model="yamlData" />
        </div>
      </Modal>
    </div>

    <!-- 加载等待 -->
    <Spin fix v-show="show">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>处理中...</div>
    </Spin>
  </div>
</template>

<script>
import {getConfigInfo,updateConfig} from '@/api/base'
import YamlEditor from '@/components/yaml-editor/index.vue';

export default {
  name: 'Config',
  components: { YamlEditor },
  data(){
    return {
      formSearch: {
        dataId: '',
        groupId: ''
      },
      loading: false,
      tableData: [],
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '服务名称',
          key: 'dataId',
          minWidth: 200
        },
        {
          title: '组名称',
          key: 'groupId',
          minWidth: 150
        },
        {
          title: '地址',
          key: 'srcIp',
          minWidth: 150
        },
        {
          title: '类型',
          key: 'type',
          minWidth: 150
        },
        {
          title: '说明',
          key: 'cDesc',
          minWidth: 200
        },
        {
          title: '创建时间',
          key: 'gmtCreate',
          minWidth: 170
        },
        {
          title: '更新时间',
          key: 'gmtModified',
          minWidth: 170
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 130,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.detailModal = true
                    this.configTitle = '查看 [ '+ params.row.dataId + ' ] 的配置信息'
                    this.content = params.row.content
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.editModal = true
                    this.editConfigTitle = '编辑 [ '+ params.row.dataId + ' ] 配置信息'
                    this.yamlData = params.row.content
                    this.currentId = params.row.id
                  }
                }
              }, '编辑')
            ]);
          }
        }
      ],
      configTitle: '',
      detailModal: false,
      content: '',
      editModal: false,
      editConfigTitle: '',
      yamlData: '',
      currentId: '',
      show: false
    }
  },
  methods:{
    /**
     * 处理搜索
     */
    querySearch(){
      this.loading = true
      getConfigInfo({
        pageNum: 1,
        pageSize: 10,
        dataId: this.formSearch.dataId,
        groupId: this.formSearch.groupId
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data.list
      }).catch(()=>{
        this.loading = false
      })
    },
    /**
     * 初始化表格数据
     */
    getConfig(){
      this.loading = true
      getConfigInfo({
        pageNum: 1,
        pageSize: 10,
        dataId: '',
        groupId: ''
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data.list
      }).catch(()=>{
        this.loading = false
      })
    },
    /**
     * 处理分页
     */
    handlePage(pageNum){
      this.loading = true
      getConfigInfo({
        pageNum: pageNum,
        pageSize: 10,
        dataId: this.formSearch.dataId,
        groupId: this.formSearch.groupId
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data.list
      }).catch(()=>{
        this.loading = false
      })
    },
    /**
     * 保存修改配置
     */
    handelAdd(){
      this.show = true
      updateConfig({
        id: this.currentId,
        content: this.yamlData
      }).then(res => {
        this.show = false
        if(res.data.status){
          this.$Message.success('保存成功')
          this.getConfig()
        }
      }).catch(()=>{
        this.show = false
      })
    }
  },
  mounted(){
    this.getConfig()
  }
}
</script>

<style lang="less" scoped>
.config-wrapper{
  padding: 10px;
  .page-wrapper{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
}
.input-box .ivu-input-wrapper textarea{
  color: #1064b3;
}
</style>

<style scoped>
.config-model >>> .ivu-modal-body{
  padding: 0;
  background-color: #272822;
}

.input-model >>> .ivu-modal-body{
  padding: 0;
}
</style>
